<template>
    <el-dialog :visible.sync="dialog" :title="isAdd ? '资源上传' : '资源编辑'" append-to-body width="720px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px" append-to-body>
            <el-form-item :label="rName+'链接'" prop="resUrl">
                <el-input v-model="form.resUrl" style="width: 505px;" placeholder=""   clearable/>
            </el-form-item>  
  
            <el-form-item label="标题" prop="resName">
                <el-input v-model="form.resName" style="width: 505px;" placeholder="请输入标题" maxlength="20" minlength="4" clearable/>
            </el-form-item> 

            <el-form-item label="类型" prop="useType">
                <el-select v-model="form.useType" clearable  filterable placeholder="请选择" style="width: 305px;">
                    <el-option
                        v-for="item in condition"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>             
            
            <el-form-item label="简介">
                <div style=""></div>
                <el-input v-model="form.remark" style="width: 305px;" rows="5" type="textarea" maxlength="100"  clearable show-word-limit />
            </el-form-item>
            
            </br>
            <el-form-item label="所属学段" prop="resPhases" >
                <el-select v-model="form.resPhases"    filterable placeholder="请选择学段" style="width: 150px;" @change="getGrade()">
                    <el-option
                        v-for="item in phNames"
                        :key="item.id"
                        :label="item.phName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="年级" prop="resGrade" label-width="50px"  v-if="this.form.resPhases !=8">
                <el-select v-model="form.resGrade" clearable  filterable placeholder="请选择年级" style="width: 150px;">
                    <el-option
                        v-for="item in Grade"
                        :key="item.id"
                        :label="item.gradeName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="科目" prop="resCourses" label-width="50px">
                <el-select v-model="form.resCourses" clearable  filterable placeholder="请选择科目" style="width: 150px;" >
                    <el-option
                        v-for="item in Courses"
                        :key="item.id"
                        :label="item.couName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item label="隐私" prop="resStatus">
                <el-radio-group v-model="form.resStatus">
                  <el-radio :label="0">公开</el-radio>
                  <el-radio :label="1">私有</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-tooltip class="tooltip" placement="top" effect="light">
                <div slot="content">
                      <p>私有仅自己可见:</p>                     
                </div>
                <i class="el-icon-question"></i>
            </el-tooltip>
            
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancel">取消</el-button>
            <el-button :loading="loading" type="primary" @click="doSubmit" :disabled="this.disabled">确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { resourcesSave, phName, couName } from '@/api/request'
import { Grades,resourcesInit } from '@/api/data'
import { validateEmpty, debounce } from '@/utils/validate'
export default {
    props: {
        isAdd: {
          type: Boolean,
          required: true
        },
        condition:{
            type: Array,
            required: true
        },
        rName:{
            type: String,
            required: true
        }
    },
    data() {
        return {
            subject:[],schIds:[],roles:[],
            show:true,
            disabled:false,
            loading: false, dialog: false, 
            phNames:[],
            Courses:[],
            Grade:[],
            isEdit:false,
            form: {
                id:'',
                resCover:'',      //封面
                resUrl:'',        //地址
                resSize:'',      //大小
                resName:'',      //视频标题
                useType:'',      //视频类型
                remark:'',       //简介
                resPhases:'',    //学段
                resGrade:'',     //年级
                resCourses:'',   //科目
                resStatus:''      //隐私
            },
            rules: {
                resUrl:[
                    { required: true, trigger: 'blur',message: '链接地址不能为空'},
                    {validator:validateEmpty,trigger: 'blur',}
                ],
                resName:[
                    { required: true, trigger: 'blur',min: 2,max: 16,
                        message: '标题长度在 2 到 20个字符'},
                    {validator:validateEmpty,trigger: 'blur',}
                ],
                useType:[
                    { required: true, trigger: 'blur',message: '请选择类型'},
                ],
                resPhases:[
                    { required: true, trigger: 'blur',message: '请选择学段'},
                ],
                resGrade:[
                    { required: true, trigger: 'blur',message: '请选择年级'},
                ],
                resCourses:[
                    { required: true, trigger: 'blur',message: '请选择科目'},
                ],
                resStatus:[
                    { required: true, trigger: 'blur',message: '是否公开？'},
                ],

            },
            teaTypes:[
                {
                    value: '0',
                    label: '正式教师'
                },
                {
                    value: '1',
                    label: '实习教师'
                },
                {
                    value: '2',
                    label: '调度教师'
                },
            ],
            
        }
    },
    methods: {
        cancel(){
            this.dialog  = false
        },
        doSubmit:debounce(function(){
            this.$refs['form'].validate((valid) => {
                if (valid){
                    resourcesSave(this.form).then(res => {
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 2500
                        })
                        this.dialog = false
                        if (this.isEdit === false) {
                            this.$parent.init();
                            return
                        }else{
                            this.$parent.$parent.init();
                            return
                        }
                    })
                }else {
                    return false
                }

            })

        },500),
        async ready(){
            try {
                let data = await phName()
                let xueKe = await couName()
                this.phNames = data.data
                this.Courses = xueKe.data
                // console.log(data)
            } catch (e) {
                console.log(e)
            }

        },
        async begins(){
            try {
                let data = await  resourcesInit(this.form.id)
                this.Grade  = data.data.gradeinfoList  //根据id初始化年级 
                this.resCourses  = data.data.courseinfoList
            } catch (e) {
                console.log(e)
            }

        },
        async getGrade(){
            this.form.resGrade =''
            try {
                let data = await Grades(this.form.resPhases)
                this.form.resGrade  = ''
                this.Grade  = data.data
            } catch (e) {
                console.log(e)
            }
        },
        
    },

}
</script>

<style>
/*提升样式*/
.ivu-select-dropdown, .ivu-cascader-transfer{
    z-index: 3000 !important;
}
.ivu-cascader .ivu-input {
    font-size: 13px;
    padding-left: 15px;
}
</style>

<style scoped lang="scss">
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    display: inline-block;
}
</style>
